<template>
  <div style="height: 100%; margin-bottom: 20px">
    <el-row class="nav">
      <i class="el-icon-arrow-left"
         @click="goBack"></i>
      <span class="font-weight">{{$store.state.setNoticeId ?'编辑通知设置':'新建通知设置'}}</span>
    </el-row>
    <el-divider style="margin-bottom: 10px"></el-divider>
    <el-form ref="form"
             :model="form"
             :label-position="left"
             :label-width="labelWidth"
             style="width: 500px; margin: 0 auto">
      <!-- 工单类型 -->
      <el-form-item label="工单类型">
        <el-select v-model="OrderName"
                   size="mini"
                   clearable
                   placeholder="请选择工单类型">
          <el-option v-for="item in orderOptions"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 通知条件 -->
      <el-form-item label="通知条件">
        <el-select v-model="noticeCondition"
                   @change="handleNoticeCondition"
                   size="mini"
                   clearable
                   placeholder="请选择通知条件">
          <el-option v-for="item in noticeConditOptions"
                     :key="item.dictCode"
                     :label="item.dictName"
                     :value="item.dictCode">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 创建人 -->
      <el-form-item v-for="v in NewuserList"
                    :key="v.dictCode"
                    :label="v.dictName"
                    :vaule="v.dictCode">
        <el-row :gutter="20">
          <el-col :span="10"
                  :offset="-1">
            <el-checkbox v-for="(val, i) in v.msgTemplateList"
                         v-model="val.bloer"
                         :key="i"
                         :label="val.dictName"
                         :vaule="val.dictCode">
              {{ val.dictName }}
              <el-select v-model="val.name"
                         :value="val.name"
                         size="mini"
                         clearable
                         placeholder="请选择通知模板">
                <el-option v-for="item in val.msgTemplateList"
                           :key="item.id"
                           :label="item.name"
                           :value="item.name">
                </el-option>
              </el-select>
            </el-checkbox>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-button type="button"
                   class="el-button el-button--primary el-button--medium h30Btn"
                   @click="Submit">完成</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  NoticeTempList,
  NoticeNewdate,
  NoticeTempListById,
  NoticeTempListForbidden,
  NoticeTempListUpdate,
  NoticeTempListDelete,
  NoticeTempListInsert,
  getWorkOrderTypeByUserId,
  getNoticeCond,
  getNoticePerson,
  getNoticeTemplateType,
  getNoticeMsgType,
} from "@/api/setNotice";
export default {
  data () {
    return {
      OrderName: "",
      noticeCondition: "",
      detailsCheckList: [],
      detailsCheck: [],
      orderOptions: [],
      noticeConditOptions: [],
      msgTargetType: [],
      msgTemplateId: "",
      msgType: [],
      notifyType: "",
      workOrderTypeId: "",
      userList: [],
      NewuserList: [],
      newDatalist: "",
    };
  },
  methods: {
    //工单详情列表
    NewDatalist () {
      NoticeNewdate().then((res) => {
        this.userList = res.data.data.msgTargetList;
        this.detailsCheckList = JSON.parse(
          JSON.stringify(res.data.data.msgTypeList)
        );
        this.userList.forEach((item) => {
          item.msgTemplateList = JSON.parse(
            JSON.stringify(this.detailsCheckList)
          );
        });
        if (!this.$store.state.setNoticeId) {
          this.NewuserList = JSON.parse(JSON.stringify(this.userList));
        } else {
          this.handleSearchOneData()
        }
      });
    },
    Submit () {
      // 编辑保存
      let arr = [];
      let obj = {
        msgTargetType: "",
        msgTemplateId: "",
        msgType: "",
      };
      this.NewuserList.forEach((item) => {
        item.msgTemplateList.forEach((val) => {
          if (val.bloer) {
            val.msgTemplateList.forEach((v) => {
              if (val.name === v.name && val.bloer) {
                obj.msgTemplateId = v.id;
                obj.msgTargetType = item.dictCode;
                obj.msgType = val.dictCode;
                let Obj = JSON.parse(JSON.stringify(obj));
                arr.push(Obj);
              }
            });
          }
        });
      });
      console.log("大家好", arr);
      let workOrderTypeId = "";
      let notifyType = "";
      this.orderOptions.forEach((item) => {
        if (item.name == this.OrderName) {
          workOrderTypeId = item.id;
        }
      });
      this.noticeConditOptions.forEach((item) => {
        if (item.dictName == this.noticeCondition) {
          notifyType = item.dictCode;
        }
      });
      let params = {
        id: this.$store.state.setNoticeId || "",
        msgSettingRelations: arr,
        workOrderTypeId: workOrderTypeId || this.OrderName,
        notifyType: notifyType || this.noticeCondition,
      };
      if (this.$store.state.setNoticeId) {
        console.log(params);
        NoticeTempListUpdate(params).then((res) => {
          let data = res.data;
          if (data.retCode === 200) {
            console.log(data.data);
            this.goBack();
          }
        });
      }
      // 新建保存
      else {
        NoticeTempListInsert(params).then((res) => {
          let data = res.data;
          if (data.retCode === 200) {
            this.$message({
              type: "success",
              message: data.msg,
            });
            this.goBack();
            console.log(data.data);
          } else {
            this.$message({
              type: "error",
              message: data.msg,
            });
          }
        });
      }
    },
    // 编辑
    handleSearchOneData () {
      // 判断是从编辑入口进入
      let params;
      if (this.$store.state.setNoticeId) {
        console.log("是编辑进来的");
        params = this.$store.state.setNoticeId;
        // 通过id查询当前数据
        NoticeTempListById(params).then((res) => {
          let data = res.data;
          this.newDatalist = data.data;
          this.orderOptions.forEach((item) => {
            if (item.id == this.newDatalist.workOrderTypeId) {
              this.OrderName = item.name;
              console.log("这是OrderName", this.OrderName);
            }
          });
          this.noticeConditOptions.forEach((item) => {
            if (item.dictCode == data.data.notifyType) {
              this.noticeCondition = item.dictName;
              console.log("这是noticeCondition", this.noticeCondition);
            }
          });
          //回填接口数据
          this.newDatalist.msgSettingRelations.forEach((val) => {
            this.userList.forEach((item) => {
              if (val.msgTargetType == item.dictCode) {
                item.msgTemplateList.forEach((v) => {
                  if (val.msgType === v.dictCode) {
                    v.msgTemplateList.forEach((data) => {
                      if (val.msgTemplateId === data.id) {
                        v.name = data.name;
                        v.bloer = true;
                      }
                    });
                  }
                });
              }
            });
          });
          this.NewuserList = JSON.parse(JSON.stringify(this.userList));
        });
      } else {
        console.log("不是编辑进来的");
        return;
      }
    },
    // 获取工单类型
    getOrderList () {
      getWorkOrderTypeByUserId().then((res) => {
        let data = res.data;
        this.orderOptions = data.data;
        this.NewDatalist();
      });
    },
    // 获取流转类型
    getNoticeCondition () {
      getNoticeCond().then((res) => {
        let data = res.data;
        this.noticeConditOptions = data.data;
      });
    },
    goBack () {
      this.$router.push("/setNotice");
    },
  },
  mounted () {
    // 列表查询
    this.getOrderList();
    this.getNoticeCondition();
  },
};
</script>
<style scoped>
.right-10 {
  margin-left: 24px;
}
</style>
